<template lang="pug">
.form
  .form-title 添加视频
  .form-content
    .form-item(v-if="!form.sourceMaterialId")
      .form-item-label.import 上传视频：
      .form-item-bd
        .form-item-bd-info 请上传时长小于1小时的视频，支持主流的视频格式
        ali-upload(@getProgress="getProgress" @getFileInfo="getFileInfo($event, 'productManualList')" multiple accept="video/*")
          el-button(type="primary" plain size="small") {{form.fileId ? '重新上传' : '上传视频'}}
        .form-item-file(v-if="form.fileName")
          .file-progress(:style="`width: ${form.fileProgress}%`")
          .iconfont.el-icon-folder
          .form-item-file-name {{form.fileName}}
          .form-item-file-progress {{form.fileProgress}}%
        .form-item-file-info(v-if="form.fileId") 视频上传成功，你可以继续编辑其他信息保存提交
    .form-item
      .form-item-label.import 视频封面：
      .form-item-bd
        .form-item-bd-info 视频上传完成后可设置封面图
        .form-select-cover(v-if="form.fileId")
          .styles-item-btn(@click="selectImage" v-if="!form.sourceMaterialId")
            .el-icon-plus
            span 从图片库中选择
          .form-cover(v-if="form.coverImageUrl" :style="`background-image: url(${form.coverImageUrl})`")
        .form-align(@click="selectImage" v-if="form.sourceMaterialId") 重新选择
    .form-item
      .form-item-label.import 标题：
      .form-item-bd
        el-input(placeholder="文件上传成功后自动获取文件名称" size="small" v-model="form.title" maxlength="30" show-word-limit)
        .form-item-input-info 标题将展示在相关的播放页面，建议填写清晰、准确、生动的标题
        .form-item-input-info(v-if="form.sourceMaterialId") 此处修改只影响素材库标题，不影响已群发播放页面的视频标题展示
    .form-item
      .form-item-label.import 分类：
      .form-item-bd
        el-select(placeholder="请准确选择分类" size="small" v-model="form.spaceId")
          el-option(v-for="item in cateList" :label="item.categoryName" :value="item.articleCategoryId" :key="item.articleCategoryId")
        .form-item-input-info(v-if="form.sourceMaterialId") 请填写准确的视频分类
    .form-item
      .form-item-label 视频介绍(选填)：
      .form-item-bd
        el-input(placeholder="请输入视频介绍" resize="none" size="small" rows="8" v-model="form.videoDetail" type="textarea" maxlength="300" show-word-limit)
        .form-item-input-info 介绍语将展示在相关播放页面，建议填写简洁明确、有信息量的内容
        .form-item-input-info(v-if="form.sourceMaterialId") 此处修改只影响素材库介绍语，不影响已群发播放页面的视频介绍语展示
  .form-footer
    el-button(type="primary" size="small" @click="submit") 提交
    el-button(size="small") 预览
  select-cover-modal(:show="showCoverModal" @close="closeCoverModal" @change="changeCover")
</template>

<script>
import { getArticleCategoryList, addOrUpdateVideoSourceMaterial, getVideoSourceMaterialDetail } from 'api'
import aliUpload from '@/components/customUpload'
import selectCoverModal from './components/selectCoverModal'
export default {
  name: 'editVideoMaterial',
  data () {
    return {
      fileAgain: null,
      form: {
        sourceMaterialId: '',
        title: '',
        fileId: '',
        coverImage: '',
        videoDetail: '',
        fileProgress: 0,
        spaceId: ''
      },
      cateList: [],
      showCoverModal: false,
    }
  },
  components: {
    aliUpload,
    selectCoverModal
  },
  methods: {
    closeCoverModal () {
      this.showCoverModal = false
    },
    changeCover (item) {
      this.form.coverImage = item.fileId
      this.form.coverImageUrl = item.fileUrl
      this.showCoverModal = false
    },
    selectImage () {
      this.showCoverModal = true
    },
    getProgress (file) {
      this.form.fileProgress = file[0].progress
      this.form.fileName = file[0].fileName
    },
    getFileInfo (data) {
      this.form.fileId = data[0].fileId
      this.form.title = data[0].fileName
    },
    async getCateList () {
      try {
        const { ResultSet } = await this.$axios.post(getArticleCategoryList)
        this.cateList = ResultSet.userData.data
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async submit () {
      try {
        if (!this.form.fileId) {
          this.$message.error('请上传视频！')
          return
        }
        if (!this.form.coverImage) {
          this.$message.error('请选择视频封面！')
          return
        }
        if (!this.form.title) {
          this.$message.error('请输入标题！')
          return
        }
        if (this.form.title && this.form.title.length > 30) {
          this.$message.error('标题不可以超过30个字！')
          return
        }
        if (!this.form.spaceId) {
          this.$message.error('请选择分类！')
          return
        }
        this.loading = true
        await this.$axios.post(addOrUpdateVideoSourceMaterial, { ...this.form })
        this.$message.success('保存成功')
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getDetail () {
      try {
        const { ResultSet } = await this.$axios.post(getVideoSourceMaterialDetail, { sourceMaterialId: this.form.sourceMaterialId })
        this.form = { ...this.form, ...ResultSet.userData.detail }
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getCateList()
      if (to.params.id) {
        vm.form.sourceMaterialId = to.params.id
        vm.getDetail()
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.form {
  background: #fff;
  padding: 0 26px;
}
.form-title {
  padding: 20px 0;
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  color: #363636;
}
.form-content {
  width: 550px;
  margin-left: 480px;
  padding: 10px 0;
}
.form-item {
  display: flex;
  padding: 12px 0;
}
.form-item-label {
  line-height: 32px;
  font-size: 16px;
  color: #333;
  text-align: right;
  width: 150px;
  padding-right: 10px;
  &.import {
    &:before {
      content: '*';
      margin-right: 3px;
      color: #F56C6C;
    }
  }
}
.form-item-bd {
  flex: 1;
  .el-select {
    width: 100%;
  }
}
.form-item-bd-info {
  font-size: 14px;
  line-height: 32px;
  color: #999;
  margin-bottom: 8px;
}
.form-item-input-info {
  font-size: 12px;
  line-height: 22px;
  margin-top: 5px;
  color: #999;
}
.form-item-file {
  position: relative;
  width: 400px;
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 32px;
  margin-top: 5px;
  color: #999;
  .file-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    border: 2px;
    background: #FF708B;
  }
  .iconfont {
    font-size: 16px;
    margin-right: 5px;
  }
  .form-item-file-name {
    flex: 1;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.form-item-file-info {
  margin-top: 5px;
  font-size: 14px;
  line-height: 22px;
  color: #353535;
}
.form-select-cover {
  display: flex;
}
.styles-item-btn {
  width: 150px;
  height: 150px;
  margin-right: 50px;
  border: 1px dashed #DCDFE6;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #B2B4C7;
  .el-icon-plus {
    font-size: 16px;
    margin-right: 5px;
  }
}
.form-cover {
  width: 150px;
  height: 150px;
  border-radius: 4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.form-footer {
  padding: 50px 0;
  text-align: center;
}
.form-align {
  font-size: 14px;
  line-height: 22px;
  color: #576B95;
  margin-top: 5px;
  cursor: pointer;
}
</style>